<template>
  <view class="container">
    <view class="navbar u-f-ajc">
      <image src="/static/jibei/home/back.png" class="abso_back" mode="widthFix"
        @click="$u.route({type: 'back', delta: 1})"></image>
      <image src="/static/jibei/xiaofeiquan/header.png" mode="widthFix"></image>
    </view>

    <view class="content">
      <view class="card1">
        <view class="u-f">
          <image src="/static/jibei/guquan/bi.png" mode=""></image>
          <view class="card1_right_box u-f1">
            <view style="font-size: 38rpx;">消费券来源</view>
            <view style="font-size: 20rpx;">※消费券</view>
          </view>
        </view>
        <view class="card1_right_box u-f1" style="margin-top: 10rpx;">
          <view style="font-size: 38rpx;">消费券价值</view>
          <view>
            <view style="font-size: 20rpx;">※消费券</view>
          </view>
        </view>
      </view>

      <view class="card2 u-f-ac u-f-jsb f-w-w">
        <view class="card2_box u-f u-f-column" @click="obtain">
          <view>待释放消费值</view>
          <view class="nums">{{jfz}}</view>
        </view>
        <view class="card2_box u-f u-f-column">
          <view>已释放消费值</view>
          <view class="nums">{{jfz_out}}</view>
        </view>
      </view>
      <scroll-view scroll-y class="item_list">
        <view class="items u-f-ac">
          <view class="u-f-ajc" style="width: 50%;">时间</view>
          <view class="u-f-ajc" style="width: 25%;">数量</view>
          <view class="u-f-ajc" style="width: 25%;">来源</view>
        </view>
        <view class="items items2 u-f-ac" @click="toarticlexq(value.projectid)" v-for="(value,key) in out_log"
          :key="key">
          <view class="u-f-ajc" style="width: 50%;">{{value.time}}</view>
          <view class="u-f-ajc" style="width: 25%;">{{value.num}}</view>
          <view class="u-f-ajc" style="width: 25%;">{{value.common}}</view>
        </view>
      </scroll-view>

    </view>

    <tabbars :current="2"></tabbars>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        openid: '',
        out_log: [],
        jfz: '',
        jfz_out: '',
      }
    },
    onLoad: function(e) {
      uni.showLoading()
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          this.openid = res.data
          this.getdata()
          this.getdata2()
          //页面一加载时请求一次数据`
          uni.hideLoading()
        },
        fail: () => {
          uni.navigateTo({
            url: '../login/login'
          });
        }
      });
    },
    methods: {
      getdata() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=tzz.jfz_out&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: (res) => {
            console.log(res)
            this.out_log = res.data.out_log
          },
          fail: () => {},
          complete: () => {}
        });
      },
      obtain() {
        uni.navigateTo({
          url: 'obtain/obtain?type=' + 1
        })
      },
      getdata2() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=tzz.jfz_index&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: (res) => {
            console.log(res)
            this.jfz_out = res.data.jfz_out
            this.jfz = res.data.jfz
          },
          fail: () => {},
          complete: () => {}
        });
      },
    },
  }
</script>

<style lang="scss">
  page {
    background-color: #B5C3C7;
  }

  .container {
    width: 100%;
    height: 100vh;
    background: url(/static/jibei/home/home_bg.png) no-repeat 0 0;
    background-size: cover;
    box-sizing: border-box;
  }

  .navbar {
    width: 100%;
    padding: 100rpx 0 30rpx;

    image {
      width: 80%;
    }
  }

  .content {
    padding: 0 40rpx;
    padding-bottom: 200rpx;
    color: #FFFFFF;
  }

  .card1 {
    width: 100%;
    height: 480rpx;
    border-radius: 10rpx;
    border: 1px solid #00FBF6;
    background-color: #0A3641;
    margin-bottom: 20rpx;
    padding: 30rpx;

    image {
      width: 160rpx;
      height: 160rpx;
      margin-right: 20rpx;
    }

    .card1_right_box {
      // background-color: skyblue;
    }
  }

  .card2 {
    width: 100%;

    .card2_box {
      justify-content: center;
      width: 49%;
      height: 170rpx;
      border-radius: 10rpx;
      border: 1px solid #00FBF6;
      background-color: #0A3641;
      padding: 0 40rpx;
      margin-bottom: 20rpx;

      .nums {
        font-weight: 700;
        font-size: 44rpx;
      }

      .dui {
        width: 70rpx;
        height: 70rpx;
        border-radius: 100%;
        border: 2px solid #FFFFFF;
        box-sizing: border-box;
        font-size: 40rpx;
      }
    }
  }

  .item_list {
    width: 100%;
    height: 450rpx;
    border-radius: 10rpx;
    border: 1px solid #00FBF6;
    background-color: #0A3641;
    margin-bottom: 20rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .items {
      view {
        font-size: 24rpx;
        padding: 14rpx 0;
        border-bottom: 1px solid #072834;
        box-sizing: border-box;
      }
    }

    // .items2 {

    // }
  }
</style>
